<template>
  <div class="wrapper">
    <div class="pool-board card">
      <el-row :gutter="24">
        <el-col :span="4" class="board-col">
          <div>
            <div class="row-1">运力总数</div>
            <div class="row-2">{{ ruleForm.total }}</div>
          </div>
        </el-col>
        <el-col :span="4" class="board-col">
          <div>
            <div class="row-1">冷藏车总数</div>
            <div class="row-2">{{ ruleForm.chill_car_count }}</div>
          </div>
        </el-col>
        <el-col :span="4" class="board-col">
          <div>
            <div class="row-1">4.2m冷藏车数</div>
            <div class="row-2">{{ ruleForm.chill_car_4_count }}</div>
          </div>
        </el-col>
        <el-col :span="4" class="board-col">
          <div>
            <div class="row-1">7.6m冷藏车数</div>
            <div class="row-2">{{ ruleForm.chill_car_7_count }}</div>
          </div>
        </el-col>
        <el-col :span="4" class="board-col">
          <div>
            <div class="row-1">价格本维护率</div>
            <div class="row-2">
              {{ ruleForm.price_maintenance_rate * 100 }}%
            </div>
          </div>
        </el-col>
        <el-col :span="4" class="board-col">
          <div>
            <div class="row-1">常跑路线维护率</div>
            <div class="row-2">
              {{ ruleForm.route_maintenance_rate * 100 }}%
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div
      class="wrap card"
      id="main"
      style="min-width: 80%; height: 400px; padding: 0px 0px 0px 0px"
    ></div>
    <div class="pool-table" style="display: flex">
      <div class="pool-table-card" style="width: 50%">
        <h3 class="card-title">各区冷藏车保有量</h3>
        <el-table
          class="pool-table-item"
          ref="multipleTable"
          :data="ruleForm.branch_capacity_list"
          border
          stripe
          align="center"
        >
          <el-table-column prop="branch_name" label="区域"></el-table-column>
          <el-table-column
            prop="chill_car_count"
            label="冷藏车总数"
            width="120"
          ></el-table-column>

          <el-table-column
            prop="chill_car_4_count"
            label="4.2m冷藏车数量"
            width="120"
          ></el-table-column>

          <el-table-column
            prop="chill_car_7_count"
            label="7.6m冷藏车数量"
            width="120"
          ></el-table-column>
        </el-table>
      </div>

      <div class="pool-table-card" style="width: 50%">
        <h3 class="card-title">各区冷藏车增加量</h3>
        <el-table
          class="pool-table-item"
          ref="multipleTable"
          :data="ruleForm.branch_weekly_list"
          border
          stripe
          align="center"
        >
          <el-table-column
            :width="index !== 0 ? '120px' : ''"
            v-for="(item, index) in ruleForm.item_list"
            :key="index"
            :prop="item.show_name"
            :label="item.title"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div style="float: right; margin-right: 8px">
      <span style="font-size: 12px; color: #333; margin-right: 5px"
        >包含生态</span
      >
      <el-switch v-model="isInclude" @change="getData"> </el-switch>
    </div>
  </div>
</template>

<script>
import { TransportSignageInfo } from "@/api/transportationtools";
import { BarChart } from "echarts/charts";

export default {
  name: "transportpoolSignage",
  components: {},
  props: [],
  data() {
    return {
      chartData: {
        xAxisList: [],
        yAxisList: [],
      },
      isInclude: true,
      ruleForm: {
        branch_capacity_list: [],
      },
      myChart: {},
      resizeTimer: null,
    };
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
  methods: {
    getData() {
      TransportSignageInfo({
        is_include_ecology_data: this.isInclude ? 1 : 0,
      }).then((res) => {
        // // console.log(res);
        this.ruleForm = res.data;
        this.chartData.xAxisList = [];
        this.chartData.yAxisList = [];
        const weekly_number = this.ruleForm.weekly_number;
        weekly_number.forEach((item) => {
          this.chartData.xAxisList.push(item.week);
          this.chartData.yAxisList.push(item.new_count);
          this.myEcharts();
        });
      });
    },
    resizeChart() {
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }
      this.resizeTimer = setTimeout(() => {
        this.myChart.resize && this.myChart.resize();
      }, 200);
    },
    myEcharts() {
      this.$echarts.use([BarChart]);
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById("main"));
      window.addEventListener("resize", this.resizeChart);
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "每周新增运力数",
          top: 15,
          left: 10,
          textStyle: {
            color: "#101010",
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: this.chartData.xAxisList,
        },
        yAxis: {
          type: "value",
          // scale : true,
          axisLabel: {
            //每个数据都加单位
            formatter: "{value}",
          },
        },
        series: [
          {
            data: this.chartData.yAxisList,
            type: "bar",
            barWidth: 40,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  .card {
    margin: 8px;
    background: #fff;
    border-radius: 5px;
  }

  .pool-board {
    box-sizing: border-box;
    padding: 15px 20px;

    text-align: center;

    .board-col {
      border-right: 1px solid #f2f3f5;

      .row-1 {
        line-height: 32px;
      }

      .row-2 {
        font-weight: bold;
      }
    }

    .board-col:last-child {
      border-right: none;
    }
  }

  .pool-table {
    display: flex;
    // margin: 8px;
    margin-right: 4px;
    margin-left: 4px;

    .pool-table-card {
      background: #fff;
      border-radius: 5px;
      margin: 0 4px;
      box-sizing: border-box;
      padding: 10px;

      .card-title {
        font-size: 14px;
        line-height: 28px;
        padding-bottom: 5px;
        color: #101010;
      }
    }

    .pool-table-item {
      box-sizing: border-box;
    }
  }
}
</style>